Vue Cli是什麼?

1. 基於 webpack 所建置的開發工具
2. 便於使用第三方套件 (Bootstrap,axios,Vue Router...)
3. 可運行 Sass,Bebel 等編譯工具
4. 便於開發 SPA 的網頁工具
5. 靠簡單設定，就能搭建開發時常用的環境

webpack 又是什麼?
webpack 是一個網頁開發的打包工具，在開發時常會載入許多的資源，而 webpack 可以幫我們一口氣載入，然後再打包成最基礎的 .js .css .jpg .png 等檔案

在使用 Vue Cli 時，需先安裝 node.js
好了之後打開命令提示字元(Mac 為終端機)，可先輸入 node - v 查看 node.js 的版本及是否有安裝成功
之後開始安裝 Vue Cli 輸入 $npm install -g vue-cli
安裝好了之後可以輸入 vue 來查看可以用的指令，如果輸入 vue list 會列出可以用的官方樣板，這裡主要是用 webpack
接下來我們就要來建立專案，輸入 $vue init webpack 專案名稱(自訂義)
好了之後會跑出一連串的問題，基本上都是 Enter 過去，比較值得注意的是，會問你需不需要安裝 vue-router
這裡暫時不用就先 n 還有是否使用 ESLint，這裡我對 ES6 還沒有很熟，為了不增加學習曲線，我也先輸入 n
之後會問你要不要測試，這裡也是先輸入 n，之後會問你需不需要自動使用 npm install，我這裡想要採用手動的方式，所以我選擇 No
都好了之後會給你三個指令，我們依序輸入之後就可以把整個 Vue 的環境運行起來

接著我們要來安裝 Bootstrap 和 vue-axios 這兩個套件，一個是 css 的框架，一個是 Ajax 的套件
在 Vue Cli 內，並沒有 Sass 的環境，所以我們也要另外載入 Sass 的環境
輸入 $npm install bootstrap node-sass sass-loader --save
接著我們可以輸入 $npm run dev 把環境運行起來，為了測試 Sass 是否能正常運作，在 src 資料夾底下的 App.vue 最底下的 style 我們可以把它改寫成 Scss 的格式，如下:

<style lang="scss">
$color: black;

body{
    background-color: $color;
}
<style>

如果此時是可以正常運作的，及代表成功，這個時候我們就可以把 Bootstrap 引進來

<style lang="scss">
@import "~bootstrap/scss/bootstrap";
<style>

接著來安裝 axios 套件，按照 axios 官方文件，輸入 $npm install --save axios vue-axios 安裝
接著再把下面三個指令貼在 src 資料夾底下的 main.js

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

接著我們使用 randomuser api 來測試是否成功，我們回到 App.vue 的 script 增加一個 created 的掛勾，接下來依照官方文件的方法來使用 Ajax

created() {
    this.$http.get('https://randomuser.me/api/')
      .then((response) => {
        console.log(response.data)
      })
}

以上就是比較基本 Vue Cli 的部分

sass-loader 版本過高不能編譯之解決辦法